<template>
  <div class="vue-cron">
    <el-tabs type="border-card" v-model="activeName">
      <el-tab-pane>
        <span slot="label"
          ><i class="el-icon-date" /> {{ text.Seconds.name }}</span
        >
        <div class="tabBody">
          <el-row>
            <el-radio v-model="second.cronEvery" label="1">{{
              text.Seconds.every
            }}</el-radio>
          </el-row>
          <el-row>
            <el-radio v-model="second.cronEvery" label="2"
              >{{ text.Seconds.interval[0] }}
              <el-input-number
                v-model="second.incrementIncrement"
                size="small"
                :min="1"
                :max="60"
              />
              {{ text.Seconds.interval[1] || "" }}
              <el-input-number
                v-model="second.incrementStart"
                size="small"
                :min="0"
                :max="59"
              />
              {{ text.Seconds.interval[2] || "" }}
            </el-radio>
          </el-row>
          <el-row>
            <el-radio v-model="second.cronEvery" class="long" label="3"
              >{{ text.Seconds.specific }}
              <el-select
                v-model="second.specificSpecific"
                size="small"
                multiple
              >
                <el-option v-for="val in 60" :key="val" :value="val - 1">{{
                  val - 1
                }}</el-option>
              </el-select>
            </el-radio>
          </el-row>
          <el-row>
            <el-radio v-model="second.cronEvery" label="4"
              >{{ text.Seconds.cycle[0] }}
              <el-input-number
                v-model="second.rangeStart"
                size="small"
                :min="0"
                :max="60"
              />
              {{ text.Seconds.cycle[1] || "" }}
              <el-input-number
                v-model="second.rangeEnd"
                size="small"
                :min="0"
                :max="59"
              />
              {{ text.Seconds.cycle[2] || "" }}
            </el-radio>
          </el-row>
        </div>
      </el-tab-pane>
      <el-tab-pane>
        <span slot="label"
          ><i class="el-icon-date" /> {{ text.Minutes.name }}</span
        >
        <div class="tabBody">
          <el-row>
            <el-radio v-model="minute.cronEvery" label="1">{{
              text.Minutes.every
            }}</el-radio>
          </el-row>
          <el-row>
            <el-radio v-model="minute.cronEvery" label="2"
              >{{ text.Minutes.interval[0] }}
              <el-input-number
                v-model="minute.incrementIncrement"
                size="small"
                :min="0"
                :max="60"
              />
              {{ text.Minutes.interval[1] }}
              <el-input-number
                v-model="minute.incrementStart"
                size="small"
                :min="0"
                :max="59"
              />
              {{ text.Minutes.interval[2] || "" }}
            </el-radio>
          </el-row>
          <el-row>
            <el-radio v-model="minute.cronEvery" class="long" label="3"
              >{{ text.Minutes.specific }}
              <el-select
                v-model="minute.specificSpecific"
                size="small"
                multiple
              >
                <el-option v-for="val in 60" :key="val" :value="val - 1">{{
                  val - 1
                }}</el-option>
              </el-select>
            </el-radio>
          </el-row>
          <el-row>
            <el-radio v-model="minute.cronEvery" label="4"
              >{{ text.Minutes.cycle[0] }}
              <el-input-number
                v-model="minute.rangeStart"
                size="small"
                :min="0"
                :max="60"
              />
              {{ text.Minutes.cycle[1] }}
              <el-input-number
                v-model="minute.rangeEnd"
                size="small"
                :min="0"
                :max="59"
              />
              {{ text.Minutes.cycle[2] }}
            </el-radio>
          </el-row>
        </div>
      </el-tab-pane>
      <el-tab-pane>
        <span slot="label"
          ><i class="el-icon-date" /> {{ text.Hours.name }}</span
        >
        <div class="tabBody">
          <el-row>
            <el-radio v-model="hour.cronEvery" label="1">{{
              text.Hours.every
            }}</el-radio>
          </el-row>
          <el-row>
            <el-radio v-model="hour.cronEvery" label="2"
              >{{ text.Hours.interval[0] }}
              <el-input-number
                v-model="hour.incrementIncrement"
                size="small"
                :min="0"
                :max="23"
              />
              {{ text.Hours.interval[1] }}
              <el-input-number
                v-model="hour.incrementStart"
                size="small"
                :min="0"
                :max="23"
              />
              {{ text.Hours.interval[2] }}
            </el-radio>
          </el-row>
          <el-row>
            <el-radio v-model="hour.cronEvery" class="long" label="3"
              >{{ text.Hours.specific }}
              <el-select v-model="hour.specificSpecific" size="small" multiple>
                <el-option v-for="val in 24" :key="val" :value="val - 1">{{
                  val - 1
                }}</el-option>
              </el-select>
            </el-radio>
          </el-row>
          <el-row>
            <el-radio v-model="hour.cronEvery" label="4"
              >{{ text.Hours.cycle[0] }}
              <el-input-number
                v-model="hour.rangeStart"
                size="small"
                :min="0"
                :max="23"
              />
              {{ text.Hours.cycle[1] }}
              <el-input-number
                v-model="hour.rangeEnd"
                size="small"
                :min="0"
                :max="23"
              />
              {{ text.Hours.cycle[2] }}
            </el-radio>
          </el-row>
        </div>
      </el-tab-pane>
      <el-tab-pane>
        <span slot="label"><i class="el-icon-date" /> {{ text.Day.name }}</span>
        <div class="tabBody">
          <el-row>
            <el-radio v-model="day.cronEvery" label="1">{{
              text.Day.every
            }}</el-radio>
          </el-row>
          <el-row>
            <el-radio v-model="day.cronEvery" label="2"
              >{{ text.Day.intervalWeek[0] }}
              <el-input-number
                v-model="week.incrementIncrement"
                size="small"
                :min="1"
                :max="7"
              />
              {{ text.Day.intervalWeek[1] }}
              <el-select v-model="week.incrementStart" size="small">
                <el-option
                  v-for="val in 7"
                  :key="val"
                  :label="text.Week[val - 1]"
                  :value="val"
                />
              </el-select>
              {{ text.Day.intervalWeek[2] }}
            </el-radio>
          </el-row>
          <el-row>
            <el-radio v-model="day.cronEvery" label="3"
              >{{ text.Day.intervalDay[0] }}
              <el-input-number
                v-model="day.incrementIncrement"
                size="small"
                :min="1"
                :max="31"
              />
              {{ text.Day.intervalDay[1] }}
              <el-input-number
                v-model="day.incrementStart"
                size="small"
                :min="1"
                :max="31"
              />
              {{ text.Day.intervalDay[2] }}
            </el-radio>
          </el-row>
          <el-row>
            <el-radio v-model="day.cronEvery" class="long" label="4"
              >{{ text.Day.specificWeek }}
              <el-select v-model="week.specificSpecific" size="small" multiple>
                <el-option
                  v-for="val in 7"
                  :key="val"
                  :label="text.Week[val - 1]"
                  :value="
                    ['SUN', 'MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT'][val - 1]
                  "
                />
              </el-select>
            </el-radio>
          </el-row>
          <el-row>
            <el-radio v-model="day.cronEvery" class="long" label="5"
              >{{ text.Day.specificDay }}
              <el-select v-model="day.specificSpecific" size="small" multiple>
                <el-option v-for="val in 31" :key="val" :value="val">{{
                  val
                }}</el-option>
              </el-select>
            </el-radio>
          </el-row>
          <!-- <el-row>
            <el-radio v-model="day.cronEvery" label="6">{{ text.Day.lastDay }}</el-radio>
          </el-row>
          <el-row>
            <el-radio v-model="day.cronEvery" label="7">{{ text.Day.lastWeekday }}</el-radio>
          </el-row>
          <el-row>
            <el-radio v-model="day.cronEvery" label="8">{{ text.Day.lastWeek[0] }}
              <el-select v-model="day.cronLastSpecificDomDay" size="small">
                <el-option v-for="val in 7" :key="val" :label="text.Week[val-1]" :value="val" />
              </el-select>
              {{ text.Day.lastWeek[1]||'' }}
            </el-radio>
          </el-row> -->
          <!-- <el-row>
            <el-radio v-model="day.cronEvery" label="9">
              <el-input-number v-model="day.cronDaysBeforeEomMinus" size="small" :min="1" :max="31" />
              {{ text.Day.beforeEndMonth[0] }}
            </el-radio>
          </el-row> -->
          <!-- <el-row>
            <el-radio v-model="day.cronEvery" label="10">{{ text.Day.nearestWeekday[0] }}
              <el-input-number v-model="day.cronDaysNearestWeekday" size="small" :min="1" :max="31" />
              {{ text.Day.nearestWeekday[1] }}
            </el-radio>
          </el-row>
          <el-row>
            <el-radio v-model="day.cronEvery" label="11">{{ text.Day.someWeekday[0] }}
              <el-input-number v-model="week.cronNthDayNth" size="small" :min="1" :max="5" />
              <el-select v-model="week.cronNthDayDay" size="small">
                <el-option v-for="val in 7" :key="val" :label="text.Week[val-1]" :value="val" />
              </el-select>
              {{ text.Day.someWeekday[1] }}
            </el-radio>
          </el-row> -->
        </div>
      </el-tab-pane>
      <el-tab-pane>
        <span slot="label"
          ><i class="el-icon-date" /> {{ text.Month.name }}</span
        >
        <div class="tabBody">
          <el-row>
            <el-radio v-model="month.cronEvery" label="1">{{
              text.Month.every
            }}</el-radio>
          </el-row>
          <el-row>
            <el-radio v-model="month.cronEvery" label="2"
              >{{ text.Month.interval[0] }}
              <el-input-number
                v-model="month.incrementIncrement"
                size="small"
                :min="0"
                :max="12"
              />
              {{ text.Month.interval[1] }}
              <el-input-number
                v-model="month.incrementStart"
                size="small"
                :min="0"
                :max="12"
              />
            </el-radio>
          </el-row>
          <el-row>
            <el-radio v-model="month.cronEvery" class="long" label="3"
              >{{ text.Month.specific }}
              <el-select v-model="month.specificSpecific" size="small" multiple>
                <el-option
                  v-for="val in 12"
                  :key="val"
                  :label="val"
                  :value="val"
                />
              </el-select>
            </el-radio>
          </el-row>
          <el-row>
            <el-radio v-model="month.cronEvery" label="4"
              >{{ text.Month.cycle[0] }}
              <el-input-number
                v-model="month.rangeStart"
                size="small"
                :min="1"
                :max="12"
              />
              {{ text.Month.cycle[1] }}
              <el-input-number
                v-model="month.rangeEnd"
                size="small"
                :min="1"
                :max="12"
              />
            </el-radio>
          </el-row>
        </div>
      </el-tab-pane>
    </el-tabs>
    <div class="bottom">
      <span class="value">{{ this.cron }}</span>
      <el-button type="primary" @click="change">{{ text.Save }}</el-button>
      <el-button type="primary" @click="close">{{ text.Close }}</el-button>
    </div>
  </div>
</template>

<script>
import Language from './cn'

export default {
  name: 'VueCron',
  props: {
    cronValue: {
      type: String,
      default() {
        return ''
      }
    }
  },
  data() {
    return {
      activeName: '3',
      second: {
        cronEvery: '1',
        incrementStart: '3',
        incrementIncrement: '5',
        rangeStart: '',
        rangeEnd: '',
        specificSpecific: []
      },
      minute: {
        cronEvery: '1',
        incrementStart: '3',
        incrementIncrement: '5',
        rangeStart: '',
        rangeEnd: '',
        specificSpecific: []
      },
      hour: {
        cronEvery: '1',
        incrementStart: '3',
        incrementIncrement: '5',
        rangeStart: '',
        rangeEnd: '',
        specificSpecific: []
      },
      day: {
        cronEvery: '1',
        incrementStart: '1',
        incrementIncrement: '1',
        rangeStart: '',
        rangeEnd: '',
        specificSpecific: [],
        cronLastSpecificDomDay: 1,
        cronDaysBeforeEomMinus: '',
        cronDaysNearestWeekday: ''
      },
      week: {
        cronEvery: '',
        incrementStart: '1',
        incrementIncrement: '1',
        specificSpecific: [],
        cronNthDayDay: 1,
        cronNthDayNth: '1'
      },
      month: {
        cronEvery: '1',
        incrementStart: '3',
        incrementIncrement: '5',
        rangeStart: '',
        rangeEnd: '',
        specificSpecific: []
      },
      year: {
        cronEvery: '',
        incrementStart: '2017',
        incrementIncrement: '1',
        rangeStart: '',
        rangeEnd: '',
        specificSpecific: []
      },
      output: {
        second: '',
        minute: '',
        hour: '',
        day: '',
        month: '',
        Week: '',
        year: ''
      }
    }
  },
  computed: {
    text() {
      return Language
    },
    secondsText: {
      get: function () {
        let seconds = ''
        const cronEvery = this.second.cronEvery
        switch (cronEvery.toString()) {
          case '1':
            seconds = '*'
            break
          case '2':
            seconds = this.second.incrementStart + '/' + this.second.incrementIncrement
            break
          case '3':
            this.second.specificSpecific.forEach(val => {
              seconds += val + ','
            })
            seconds = seconds.slice(0, -1)
            break
          case '4':
            seconds = this.second.rangeStart + '-' + this.second.rangeEnd
            break
        }
        return seconds
      },
      set: function (value) {
        if (value === '*') {
          this.second.cronEvery = '1'
          return
        }
        if (value.indexOf('/') !== -1) {
          this.second.cronEvery = '2'
          const valueArr = value.split('/')
          this.second.incrementStart = Number(valueArr[0])
          this.second.incrementIncrement = Number(valueArr[1])
          return
        }
        if (value.indexOf(',') !== -1 || (value.length > 0 && !Number.isNaN(Number(value)) && Number(value) < 60 && Number(value) >= 0)) {
          this.second.cronEvery = '3'
          const valueArr = value.split(',')
          this.second.specificSpecific = valueArr.map(item => Number(item))
          return
        }
        if (value.indexOf('-') !== -1) {
          this.second.cronEvery = '4'
          const valueArr = value.split('-')
          this.second.rangeStart = Number(valueArr[0])
          this.second.rangeEnd = Number(valueArr[1])
          return
        }
      }

    },
    minutesText: {
      get: function () {
        let minutes = ''
        const cronEvery = this.minute.cronEvery
        switch (cronEvery.toString()) {
          case '1':
            minutes = '*'
            break
          case '2':
            minutes = this.minute.incrementStart + '/' + this.minute.incrementIncrement
            break
          case '3':
            this.minute.specificSpecific.forEach(val => {
              minutes += val + ','
            })
            minutes = minutes.slice(0, -1)
            break
          case '4':
            minutes = this.minute.rangeStart + '-' + this.minute.rangeEnd
            break
        }
        return minutes
      },
      set: function (value) {
        if (value === '*') {
          this.minute.cronEvery = '1'
          return
        }
        if (value.indexOf('/') !== -1) {
          this.minute.cronEvery = '2'
          const valueArr = value.split('/')
          this.minute.incrementStart = Number(valueArr[0])
          this.minute.incrementIncrement = Number(valueArr[1])
          return
        }
        if (value.indexOf(',') !== -1 || (value.length > 0 && !Number.isNaN(Number(value)) && Number(value) < 60 && Number(value) >= 0)) {
          this.minute.cronEvery = '3'
          const valueArr = value.split(',')
          this.minute.specificSpecific = valueArr.map(item => Number(item))
          return
        }
        if (value.indexOf('-') !== -1) {
          this.minute.cronEvery = '4'
          const valueArr = value.split('-')
          this.minute.rangeStart = Number(valueArr[0])
          this.minute.rangeEnd = Number(valueArr[1])
          return
        }
      }

    },
    hoursText: {
      get: function () {
        let hours = ''
        const cronEvery = this.hour.cronEvery
        switch (cronEvery.toString()) {
          case '1':
            hours = '*'
            break
          case '2':
            hours = this.hour.incrementStart + '/' + this.hour.incrementIncrement
            break
          case '3':
            this.hour.specificSpecific.forEach(val => {
              hours += val + ','
            })
            hours = hours.slice(0, -1)
            break
          case '4':
            hours = this.hour.rangeStart + '-' + this.hour.rangeEnd
            break
        }
        return hours
      },
      set: function (value) {
        if (value === '*') {
          this.hour.cronEvery = '1'
          return
        }
        if (value.indexOf('/') !== -1) {
          this.hour.cronEvery = '2'
          const valueArr = value.split('/')
          this.hour.incrementStart = Number(valueArr[0])
          this.hour.incrementIncrement = Number(valueArr[1])
          return
        }
        if (value.indexOf(',') !== -1 || (value.length > 0 && !Number.isNaN(Number(value)) && Number(value) < 24 && Number(value) >= 0)) {
          this.hour.cronEvery = '3'
          const valueArr = value.split(',')
          this.hour.specificSpecific = valueArr.map(item => Number(item))
          return
        }
        if (value.indexOf('-') !== -1) {
          this.hour.cronEvery = '4'
          const valueArr = value.split('-')
          this.hour.rangeStart = Number(valueArr[0])
          this.hour.rangeEnd = Number(valueArr[1])
          return
        }
      }

    },
    daysText: {
      get: function () {
        let days = ''
        const cronEvery = this.day.cronEvery
        switch (cronEvery.toString()) {
          case '1':
            break
          case '2':
          case '4':
          case '11':
            days = '?'
            break
          case '3':
            days = this.day.incrementStart + '/' + this.day.incrementIncrement
            break
          case '5':
            this.day.specificSpecific.forEach(val => {
              days += val + ','
            })
            days = days.slice(0, -1)
            break
          case '6':
            days = 'L'
            break
          case '7':
            days = 'LW'
            break
          case '8':
            days = this.day.cronLastSpecificDomDay + 'L'
            break
          case '9':
            days = 'L-' + this.day.cronDaysBeforeEomMinus
            break
          case '10':
            days = this.day.cronDaysNearestWeekday + 'W'
            break
        }
        return days
      },
      set: function (value) {
        if (value.indexOf('/') !== -1) {
          this.day.cronEvery = '3'
          const valueArr = value.split('/')
          this.day.incrementStart = Number(valueArr[0])
          this.day.incrementIncrement = Number(valueArr[1])
          return
        }
        if (value.indexOf(',') !== -1 || (value.length > 0 && !Number.isNaN(Number(value)) && Number(value) <= 31 && Number(value) > 0)) {
          this.day.cronEvery = '5'
          const valueArr = value.split(',')
          this.day.specificSpecific = valueArr.map(item => Number(item))
          return
        }
        if (value === 'L') {
          this.day.cronEvery = '6'
          return
        }
        if (value === 'LW') {
          this.day.cronEvery = '7'
          return
        }
        if (/^[1,2,3,4,5,6,7]L$/.test(value)) {
          this.day.cronEvery = '8'
          this.day.cronLastSpecificDomDay = Number(value[0])
          return
        }
        if (value.indexOf('L-') !== -1) {
          this.day.cronEvery = '9'
          this.day.cronDaysBeforeEomMinus = Number(value.split('-')[1])
          return
        }
        if (/^\dW$/.test(value)) {
          this.day.cronEvery = '10'
          this.day.cronDaysNearestWeekday = Number(value.slice(0, -1))
          return
        }
      }

    },
    weeksText: {
      get: function () {
        let weeks = ''
        const cronEvery = this.day.cronEvery
        switch (cronEvery.toString()) {
          case '1':
          case '3':
          case '5':
            weeks = '?'
            break
          case '2':
            weeks = this.week.incrementStart + '/' + this.week.incrementIncrement
            break
          case '4':
            this.week.specificSpecific.forEach(val => {
              weeks += val + ','
            })
            weeks = weeks.slice(0, -1)
            break
          case '6':
          case '7':
          case '8':
          case '9':
          case '10':
            weeks = '?'
            break
          case '11':
            weeks = this.week.cronNthDayDay + '#' + this.week.cronNthDayNth
            break
        }
        return weeks
      },
      set: function (value) {
        if (value.indexOf('/') !== -1) {
          this.day.cronEvery = '2'
          const valueArr = value.split('/')
          this.week.incrementStart = Number(valueArr[0])
          this.week.incrementIncrement = Number(valueArr[1])
          return
        }
        if (value.indexOf(',') !== -1 || /(SUN)|(MON)|(TUE)|(WED)|(THU)|(FRI)|(SAT)/.test(value)) {
          this.day.cronEvery = '4'
          const valueArr = value.split(',')
          this.week.specificSpecific = valueArr
          return
        }
        if (value.indexOf('#') !== -1) {
          const valueArr = value.split('#')
          this.week.cronNthDayDay = Number(valueArr[0])
          this.week.cronNthDayNth = Number(valueArr[1])
          return
        }
      }

    },
    monthsText: {
      get: function () {
        let months = ''
        const cronEvery = this.month.cronEvery
        switch (cronEvery.toString()) {
          case '1':
            months = '*'
            break
          case '2':
            months = this.month.incrementStart + '/' + this.month.incrementIncrement
            break
          case '3':
            this.month.specificSpecific.forEach(val => {
              months += val + ','
            })
            months = months.slice(0, -1)
            break
          case '4':
            months = this.month.rangeStart + '-' + this.month.rangeEnd
            break
        }
        return months
      },
      set: function (value) {
        if (value === '*') {
          this.month.cronEvery = '1'
          return
        }
        if (value.indexOf('/') !== -1) {
          this.month.cronEvery = '2'
          const valueArr = value.split('/')
          this.month.incrementStart = Number(valueArr[0])
          this.month.incrementIncrement = Number(valueArr[1])
          return
        }
        if (value.indexOf(',') !== -1 || (value.length > 0 && !Number.isNaN(Number(value)) && Number(value) <= 12 && Number(value) >= 1)) {
          this.month.cronEvery = '3'
          const valueArr = value.split(',')
          this.month.specificSpecific = valueArr.map(item => Number(item))
          return
        }
        if (value.indexOf('-') !== -1) {
          this.month.cronEvery = '4'
          const valueArr = value.split('-')
          this.month.rangeStart = Number(valueArr[0])
          this.month.rangeEnd = Number(valueArr[1])
          return
        }
      }

    },
    yearsText() {
      let years = ''
      const cronEvery = this.year.cronEvery
      switch (cronEvery.toString()) {
        case '1':
          years = '*'
          break
        case '2':
          years = this.year.incrementStart + '/' + this.year.incrementIncrement
          break
        case '3':
          this.year.specificSpecific.forEach(val => {
            years += val + ','
          })
          years = years.slice(0, -1)
          break
        case '4':
          years = this.year.rangeStart + '-' + this.year.rangeEnd
          break
      }
      return years
    },
    cron() {
      return `${this.secondsText || '*'} ${this.minutesText || '*'} ${this.hoursText || '*'} ${this.daysText || '*'} ${this.monthsText || '*'} ${this.weeksText || '?'} `
    }
  },
  watch: {
    data() {
      this.rest(this.$data)
    }
  },
  mounted() {
  },
  methods: {
    setValue(value) {
      const cronArr = value.split(' ')
      this.secondsText = cronArr[0]
      this.minutesText = cronArr[1]
      this.hoursText = cronArr[2]
      this.daysText = cronArr[3]
      this.monthsText = cronArr[4]
      this.weeksText = cronArr[5]
    },
    getValue() {
      return this.cron
    },
    change() {
      this.$emit('change', this.cron)
    },
    close() {
      this.$emit('close')
    },
    rest(data) {
      for (const i in data) {
        if (data[i] instanceof Object) {
          this.rest(data[i])
        } else {
          switch (typeof data[i]) {
            case 'object':
              data[i] = []
              break
            case 'string':
              data[i] = ''
              break
          }
        }
      }
    }
  }
}
</script>

